<!DOCTYPE html>

<html>
<head>
<title>Le Dudu</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.4.min.js">
	</script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
	<!-- page -->
	<div data-role="page" data-add-back-btn="true" data-back-btn-text="Categorias">
		<div data-role="header" data-rel="back">
			<h1>${categoriaPara}</h1>
		</div>
		<!-- /header -->
		<!-- content -->
		<div data-role="content">

			<ul data-role="listview" data-inset="true" data-filter="true"  data-filter-placeholder="Busca"
				data-theme="g">


				<g:if test="${menuAtivo != null}">

					<g:each in="${menuAtivo.itemIndicacao()}" var="item">

						<g:if test="${item.key.getCategoria().nome == categoriaPara }">
							<li><a href="/lemenu/mobileApp/item?id=${item.key.id}"
								class="ui-link-inherit">
									${item.key.nome}
							</a> <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">R$${item.key.preco}
							</span></li>
						</g:if>
					</g:each>


				</g:if>

			</ul>

		</div>
		<!-- /content -->
	</div>
	<!-- /page -->

	<!-- Start of second page -->
</body>
</html>